<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>

    <link rel="stylesheet" type="text/css" href="/scripts/gridster.js/jquery.gridster.min.css">
    <script src="/scripts/gridster.js/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body {
            margin: 0;
            background-image: url('/images/desktop.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .a-link {
            font-size: medium;
            color: aliceblue;
        }

        .a-link:hover {
            color: #e61212;
        }

        .gridster {
            min-width: 400px;
            min-height: 300px
        }

        .gridster .gs-w {
            background: #61a9cf69;
            -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }

        .gridster .menu {
            background: none;
            -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        }

        .gridster ul {
            margin: 0;
            background-color: #efefef99;
            list-style-type: none;
        }

        .gridster li {
            font-size: 1em;
            font-weight: bold;
            text-align: center;
            line-height: 100%;
            list-style: none;
            font-weight: bold;
        }

        .gridster li header {
            background: #eceff7;
            display: block;
            height: 28px;
            cursor: move;
        }

        .gridster li header .close {
            position: absolute;
            right: 0px;
            font-size: 15px;
            color: black;
            padding: 2px 4px 4px 4px;
            margin: 2px 4px 4px 4px;
            cursor: pointer;
        }

        .gridster li header .close:hover {
            color: #333333;
            background-color: #acadb3;
            border-radius: 10px;
        }

        .gridster li.menu>a {
            text-decoration: none;
        }

        .gridster li.menu>a>h3 {
            font-size: 13px;
            line-height: 7px;
            color: #000000;
            margin: 0;
        }

        .gridster li.menu>a:hover>h3 {
            color: #6d6666;
        }

        .gridster li.menu>a>img {
            margin: 10px 10px 5px 10px;
            width: 18px;
            height: 18px;
        }
    </style>
</head>

<body>
    <div class="gridster">
    </div>
    <div class="controls">
        <a href="/scripts/gridster.js/demos/" target="_blank" class="a-link">demo</a>
        <button id="btn_get">getValue</button>
        <button id="btn_set">setValue</button>
        <button id="btn_add">add</button>
        <button id="btn_clear">clear</button>
        <label>isedit</label>
        <input id="cb_isedit" type="checkbox" />
    </div>

    <textarea id="log" style="width: 100%;height: 250px;"></textarea>
    <script type="text/javascript">
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

    <script type="text/javascript">
        $(function () {
            var aaa = $.getUniqueID();

            $(".gridster").yqDesktop({
                isEdit: false,
                beforeBindingTitle: function (callback) {
                    console.log("beforeBindingTitle");
                    callback();
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                }, //标题绑定后
            });
            $('#log').hide();
            $("#btn_get").bind("click", function () {
                var value = $(".gridster").yqDesktop("getValue");
                console.log(value);
                $('#log').val(JSON.stringify(value, null, 2));
            });
            $("#btn_set").bind("click", function () {
                var value = $('#log').val();
                if (value.length > 0) {
                    $(".gridster").yqDesktop("setValue", value);
                }
            });
            $("#btn_add").bind("click", function () {
                $(".gridster").yqDesktop("add", {
                    sizex: 3,
                    sizey: 4,
                    id: "12",
                    type: "link",
                    val: "https://www.yqsite.com/"
                });
            });
            $("#btn_clear").bind("click", function () {
                $(".gridster").yqDesktop("clear");
            });
            $("#cb_isedit").bind("change", function () {
                var tf = $(this).is(':checked');
                $(".gridster").yqDesktop("isEdit", tf);
            });
        });
    </script>

    <script>
        (function ($) {
            $.fn.yqDesktop = function (opts, param) {
                if (typeof opts == 'string') {
                    return $.fn.yqDesktop.methods[opts](this, param);
                }

                return this.each(function () {
                    var $this = $(this);
                    var opt;
                    if ($this.data("yqtype") == "yqDesktop") {
                        var $uniqueID = $this.attr("ID");
                        var opts_ = $.extend({}, options($this));
                        destroy($this);
                        $this = $("#" + $uniqueID);
                        opt = $.extend(opts_, opts);
                    }
                    else {
                        opt = $.extend({}, $.fn.yqDesktop.defaults, opts);
                        var $uniqueID = $this.attr("ID");
                        if ($uniqueID === undefined || $uniqueID === null || $uniqueID == "") {
                            $uniqueID = $.getUniqueID();
                            $this.attr("ID", $uniqueID);
                        }
                    }

                    if (opt.width === undefined) {
                        opt.width = $this.width();
                    } else {
                        opt.width = $.whFormat(opt.width);
                        $this.width(opt.width);
                    }
                    if (opt.height === undefined) {
                        opt.height = $this.height();
                    } else {
                        opt.height = $.whFormat(opt.height);
                        $this.height(opt.height);
                    }

                    opt.isload = false;

                    //变量信息
                    $this.data("yqdescktop_opt", opt);
                    $this.data("yqtype", "yqDesktop");

                    opt.beforeBindingTitle.call($this, function () {
                        setValue($this);
                    });
                });
            };

            $.fn.yqDesktop.defaults = {
                //width: 1200,
                //height: 900,
                value: [
                    {
                        "row": 1,
                        "col": 1,
                        "sizex": 4,
                        "sizey": 4,
                        // "maxSizex": 4,
                        // "maxSizey": 4,
                        "minSizex": 4,
                        "minSizey": 4,
                        "type": "link",
                        "id": "900-1",
                        "val": "http://www.uieip.com/"
                    },
                    {
                        "row": 1,
                        "col": 5,
                        "sizex": 1,
                        "sizey": 1,
                        "maxSizex": 1,
                        "maxSizey": 1,

                        "type": "menu",
                        "id": "900-2",
                        val: {
                            text: "编辑菜单",
                            icon: "/images/menu.png",
                            target: "_blank",
                            more: false,
                            url: "http://www.uieip.com/"
                        }
                    },
                    {
                        "row": 1,
                        "col": 6,
                        "sizex": 1,
                        "sizey": 1,
                        "maxSizex": 5,
                        "maxSizey": 5
                    },
                ],
                isEdit: true,
                beforeBindingTitle: function (callback) {
                    callback();
                }, //标题绑定前
                afterBindingTitle: function () { }, //标题绑定后
                uppItemHtml: function (opt, r_data, callback) {
                    uppItemHtml_inner(opt,r_data,function(){
                        callback();
                    });
                },
            };

            $.fn.yqDesktop.methods = {
                options: function (jq) {
                    return options(jq);
                },
                destroy: function (jq) {
                    destroy(jq);
                },

                resize: function (jq, res) {
                    var opt = options(jq);
                    if (res.width === undefined) {
                        res.width = opt.width;
                    }
                    if (res.height === undefined) {
                        res.height = opt.height;
                    }

                    resize(jq, res.width, res.height);
                },
                setValue: function (jq, value) {
                    setValue(jq, value);
                },
                clear: function (jq) {
                    setValue(jq, []);
                },
                add: function (jq, item) {
                    addValue(jq, item);
                },
                getValue: function (jq) {
                    return getValue(jq);
                },
                isEdit: function (jq, tf) {
                    isEdit(jq, tf);
                },
            };

            function options($object) {
                return $object.data("yqdescktop_opt");
            }

            function isEdit($object, tf) {
                var opt = options($object);
                opt.isEdit = tf;
                if (!opt.isload) {
                    return;
                }

                opt.value = getValue($object);
                setValue($object);
            }

            function setValue($object, value) {
                var opt = options($object);
                if (!(value === undefined)) {
                    if (typeof value == "string") {
                        value = JSON.parse(value);
                    }
                    opt.value = value;
                }

                if (!(opt.$ul === undefined)) {
                    opt.$ul.remove();
                }

                opt.$ul = $("<ul></ul>");
                $object.append(opt.$ul);
                for (var i = 0; i < opt.value.length; i++) {
                    var r_data = opt.value[i];
                    if (r_data.id === undefined) {
                        r_data.id = newId($object);
                    }

                    var $li = $("<li></li>");
                    $li.attr("data-row", r_data.row);
                    $li.attr("data-col", r_data.col);
                    $li.attr("data-sizex", r_data.sizex);
                    $li.attr("data-sizey", r_data.sizey);

                    if (r_data.maxSizex) {
                        $li.attr("data-max-sizex", r_data.maxSizex);
                    }
                    if (r_data.maxSizey) {
                        $li.attr("data-max-sizey", r_data.maxSizey);
                    }
                    if (r_data.minSizex) {
                        $li.attr("data-min-sizex", r_data.minSizex);
                    }
                    if (r_data.minSizey) {
                        $li.attr("data-min-sizey", r_data.minSizey);
                    }

                    opt.value[i].$li = $li;
                    if (opt.isEdit) {
                        var $header = $('<header></header>');
                        var $a = $('<a class="close" title="关闭" href="javascript:void(0);"><i class="fa fa-times" aria-hidden="true"></i></a>');
                        $header.append($a);
                        $li.append($header);

                        $a.bind("click", function () {
                            var $li = $(this).parent().closest("li");
                            delItem($object, $li);
                        });
                    }

                    opt.$ul.append($li);
                }

                var g_opt = {
                    widget_base_dimensions: [100, 70], //基本小部件尺寸（以像素为单位）。第一个索引是宽度，第二个索引是高度。
                    widget_margins: [15, 15], //小部件的水平和垂直边距分别
                    draggable: {
                        handle: 'header'
                    },
                };
                if (opt.isEdit) {
                    g_opt.resize = {
                        enabled: true,
                        resize: function (e, ui, $widget) {
                            itemResize(opt, $widget);
                        },
                        stop: function (e, ui, $widget) {
                            itemResize(opt, $widget);
                        }
                    };
                }

                opt.gridster = opt.$ul.gridster(g_opt).data('gridster');
                // if (opt.isEdit) {
                //     opt.gridster.options.widget_base_dimensions[1] = 80; // 新的高度
                // } else {
                //     opt.gridster.options.widget_base_dimensions[1] = 70; // 新的高度
                // }

                uppItemInfo($object, 0);
            }

            function itemResize(opt, $li) {
                var r_data = $li.data();
                switch (r_data.type) {
                    case "link":
                        if (r_data.val) {
                            var $iframe = $li.find("iframe");
                            $iframe.css({
                                width: "100%",
                                height: ($li.height() - (opt.isEdit ? 45 : 0)) + "px"
                            });
                        }

                        break;
                    default:
                }
            }

            function uppItemInfo($object, i) {
                var opt = options($object);
                if (i >= opt.value.length) {
                    if (!opt.isload) {
                        opt.isload = true;
                        opt.afterBindingTitle.call($object);
                    }

                    return;
                }

                var r_data = opt.value[i];
                opt.uppItemHtml.call($object, opt, r_data, function () {
                    uppItemInfo($object, i + 1);
                });
            }

            function uppItemHtml_inner(opt, r_data, callback) {
                r_data.$li.data("id", r_data.id);

                switch (r_data.type) {
                    case "link":
                        r_data.$li.data("type", "link");
                        if (r_data.val) {
                            r_data.$li.data("val", r_data.val);
                            var $iframe = $('<iframe></iframe>');
                            $iframe.attr("src", r_data.val);
                            r_data.$li.append($iframe);

                            itemResize(opt, r_data.$li);
                        }

                        callback();
                        break;
                    case "menu":
                        r_data.$li.data("type", "menu");
                        var $a = $('<a href="javascript:void(0);"></a>');
                        r_data.$li.append($a);
                        if (r_data.val) {
                            r_data.$li.data("val", r_data.val);
                            if (r_data.val.icon) {
                                $a.append('<img img src="' + r_data.val.icon + '"/>');
                            }
                            if (r_data.val.text) {
                                $a.append('<h3>' + r_data.val.text + '</h3>');
                            }
                        }
                        r_data.$li.addClass("menu");

                        callback();
                        break;
                    default:
                        r_data.$li.append(r_data.id);

                        callback();
                }
            }

            function delItem($object, $li) {
                $.yqConfirm("删除", "是否确认?",
                    function (r) {
                        if (r) {
                            var opt = options($object);
                            var id = $li.attr("data-id");

                            var value = opt.value;
                            var value_ = [];
                            for (var i = 0; i < value.length; i++) {
                                if (value[i].id != id) {
                                    value_.push(value[i]);
                                }
                            }
                            opt.value = value_;
                            opt.gridster.remove_widget($li[0]);
                        }
                    });
            }

            function newId($object) {
                var opt = options($object);
                if (opt._lastid === undefined) {
                    opt._lastid = 1;
                } else {
                    opt._lastid += 1;
                }

                return "_" + opt._lastid;
            }

            function addValue($object, item) {
                var opt = options($object);

                if (item === undefined || item === null) {
                    item = {};
                }
                if (typeof item == "string") {
                    item = JSON.parse(item);
                }

                if (item.id === undefined) {
                    item.id = newId($object);
                }

                if (item.sizex === undefined) {
                    item.sizex = 1;
                }
                if (item.sizey === undefined) {
                    item.sizey = 1;
                }

                var value_ = getValue($object);
                var row = 2;
                var col = 1;
                if (value_.length > 0) {
                    row = value_[value_.length - 1].row + 1;
                }

                opt.gridster.add_widget('<li class="_new"></li>', item.sizex, item.sizey);
                item.$li = opt.$ul.find("._new");
                item.$li.removeClass("_new");

                opt.value.push(item);

                if (opt.isEdit) {
                    var $header = $('<header></header>');
                    var $a = $('<a class="close" title="关闭" href="javascript:void(0);"><i class="fa fa-times" aria-hidden="true"></i></a>');
                    $header.append($a);
                    item.$li.append($header);

                    $a.bind("click", function () {
                        var $li = $(this).parent().closest("li");
                        delItem($object, $li);
                    });
                }

                uppItemInfo($object, opt.value.length - 1);
            }

            function getValue($object) {
                var opt = options($object);

                var $lis = opt.$ul.children("li");
                var data = [];
                for (var i = 0; i < $lis.length; i++) {
                    var $li = $($lis[i]);
                    var r_data = $li.data();
                    console.log(r_data, $li);
                    var row = {
                        row: r_data.coords.grid.row,
                        col: r_data.coords.grid.col,
                        sizex: r_data.coords.grid.size_x,
                        sizey: r_data.coords.grid.size_y
                    };
                    if (r_data.maxSizex) {
                        row.maxSizex = r_data.maxSizex;
                    }
                    if (r_data.maxSizey) {
                        row.maxSizey = r_data.maxSizey;
                    }
                    if (r_data.minSizex) {
                        row.minSizex = r_data.minSizex;
                    }
                    if (r_data.minSizey) {
                        row.minSizey = r_data.minSizey;
                    }
                    if (r_data.type) {
                        row.type = r_data.type;
                    }
                    if (r_data.id) {
                        row.id = r_data.id;
                    }
                    if (r_data.val) {
                        row.val = r_data.val;
                    }
                    data.push(row);
                }


                console.log("a", opt.gridster.serialize());

                data.sort(compare);



                return data;
                //$('#log').val(JSON.stringify(data, null, 2));

                // 自定义比较函数  
                function compare(a, b) {
                    if (a.row !== b.row) {
                        return a.row - b.row;
                    }
                    return a.col - b.col;
                }
            }
        })(jQuery);
    </script>
</body>

</html>